<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>quilljs</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
    <script src="https://cdn.jsdelivr.net/npm/vue2-editor@2.10.2/dist/vue2-editor.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill-image-drop-module@1.0.3/image-drop.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quill-image-resize-module@3.0.0/image-resize.min.js"></script>


</head>
<body>
<div id="app">
    <h4>文档：https://www.vue2editor.com/api.html#props</h4>
    <h4>文档：https://www.kancloud.cn/liuwave/quill/1434141</h4>
    <div v-html="htmlForEditor"></div>

    <div>
        <vue-editor id="editor"
                    use-custom-image-handler
                    @image-added="handleImageAdded"
                    :custom-modules="customModulesForEditor"
                    :editor-options="editorSettings"
                    v-model="htmlForEditor"> </vue-editor>
    </div>

</div>

<script type="text/javascript">
    Vue.use(window.Vue2Editor)
</script>
<!-- Initialize Quill editor -->
<script>

    new Vue({
        el: '#app',
        data () {
            return {
                htmlForEditor: '<h2>I am Examplsse</h2>',
                content: '<h2>I am Examplsse</h2>',
                customModulesForEditor: [

                ],
                editorSettings: {
                    modules: {
                        imageDrop: true,
                        imageResize: {}
                    }
                }
            }
        },
        methods: {
            handleImageAdded(file, Editor, cursorLocation, resetUploader) {
                console.log('新增图片了哦')
                // An example of using FormData
                // NOTE: Your key could be different such as:
                // formData.append('file', file)

                var formData = new FormData();
                formData.append("file", 'multipart');
                formData.append("Filedata", file);
                axios({
                    url: "https://api.uomg.com/api/image.ali",
                    method: "POST",
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    data: formData
                })
                    .then(result => {
                        let url = result.data.imgurl; // Get url from response
                        Editor.insertEmbed(cursorLocation, "image", url);
                        resetUploader();
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }
        },
        computed: {

        },
        mounted() {
        }
    })
</script>

</body>
</html>